{% extends "blog/base.html" %}
{% load static %}

<!-- Page Header-->
{% block header %}
    <header class="masthead" style="background-image: url('{% static 'img/post-bg.jpg' %}')">
        <div class="container position-relative px-4 px-lg-5">
            <div class="row gx-4 gx-lg-5 justify-content-center">
                <div class="col-md-10 col-lg-8 col-xl-7">
                    <div class="post-heading">
                        <h1>Everything you’ve ever wanted is on the other side of fear.</h1>
                        <h2 class="subheading">article-count: {{ article_lst|length }}</h2>
                        <span class="meta">
                                Posted by
                                <a href="#">Last Release</a>
                                on {{ article_lst.0.create_time|date:"Y-m-d" }}
                            </span>
                    </div>
                </div>
            </div>
        </div>
    </header>
{% endblock %}
<!-- Post Content-->
{% block main %} 
    <div class="row gx-4 gx-lg-5 justify-content-center">
        <div class="col-md-10 col-lg-8 col-xl-7">
            <!-- Post preview-->
            {% for art in article_lst %}
                <div class="post-preview">
                    <a href="{% url 'blog:detail' art.slug %}">
                        <h2 class="post-title">{{ art.title }}</h2>
                        <h3 class="post-subtitle">{{ art.summary }}</h3>
                    </a>
                    <p class="post-meta">
                        Posted by
                        <a href="#">{{ art.author }}</a>
                        on {{ art.create_time|date:"Y-m-d" }}
                    </p>
                </div>
                <!-- Divider-->
                <hr class="my-4"/>
            {% endfor %}
            <!-- Pager-->
            <div class="d-flex justify-content-end mb-4"><a class="btn btn-primary text-uppercase" href="#">Older Posts
                →</a></div>
        </div>
    </div>
{% endblock %}

